<template>
    <div id='snapshotImage'>
        <div id="add" @click="snapshotImage">
            <d2-icon-svg class="tool-icon" name='add'/>
        </div>
        <div id="photoBox">
        </div>
    </div>
</template>

<script>
    import * as xeogl from '@/libs/xeogl/base/xeogl.module'

    let imgs

    export default {
        name: "photo",
        data: function () {
            return {

            }
        },
        props: [
            'currentTool',
        ],
        methods: {
            snapshotImage: function() {
                if(!!imgs) {
                    let img = document.createElement('img');
                    img.src = GOLOAlBAL_OPEOBJ.scene.canvas.getSnapshot({
                        width: 1920,
                        height: 1080,
                        format: 'png'
                    })

                    imgs.push(img);
                    let frame = {
                        t: imgs.length - 1,
                        eye: [GOLOAlBAL_OPEOBJ.camera.eye[0], GOLOAlBAL_OPEOBJ.camera.eye[1], GOLOAlBAL_OPEOBJ.camera.eye[2]],
                        look: [GOLOAlBAL_OPEOBJ.camera.look[0], GOLOAlBAL_OPEOBJ.camera.look[1], GOLOAlBAL_OPEOBJ.camera.look[2]],
                        up: [GOLOAlBAL_OPEOBJ.camera.up[0], GOLOAlBAL_OPEOBJ.camera.up[1], GOLOAlBAL_OPEOBJ.camera.up[2]]
                    }
                    frames.push(frame)

                    GOLOAlBAL_OPEOBJ.cameraPath = null;
                    GOLOAlBAL_OPEOBJ.cameraPathAnimation = null;
                    GOLOAlBAL_OPEOBJ.cameraPath = new xeogl.CameraPath({
                        frames: frames
                    });
                    GOLOAlBAL_OPEOBJ.cameraPathAnimation = new xeogl.CameraPathAnimation({
                        cameraPath: GOLOAlBAL_OPEOBJ.cameraPath,
                        playingRate: 0.5
                    });

                    let photoBox = document.getElementById('photoBox');
                    img.className = 'photoItemImg';
                    img.setAttribute('index', imgs.length - 1);
                    img.onclick = this.flyToFrame;

                    let deleteDiv = document.createElement('div');
                    deleteDiv.className = 'photoDelte';
                    deleteDiv.setAttribute('index', imgs.length - 1);
                    deleteDiv.onclick = this.deleteThisPhoto;

                    let deleteImg = document.createElement('img');
                    deleteImg.className = 'deleteIcon';
                    deleteImg.src = '/image/delete.png';
                    deleteImg.setAttribute('index', imgs.length - 1);

                    deleteDiv.appendChild(deleteImg);

                    let div = document.createElement('div');
                    div.className = 'photoItem';
                    div.setAttribute('index', imgs.length - 1);
                    div.appendChild(img);
                    div.appendChild(deleteDiv);
                    photoBox.appendChild(div);
                } else {
                    imgs = [];
                    frames = [];
                    this.snapshotImage();
                }
            },
            show: function () {
                let isDisplay = document.getElementById('snapshotImage').style.display;
                if(isDisplay === 'flex') {
                    document.getElementById('snapshotImage').style.display = 'none';
                } else {
                    document.getElementById('snapshotImage').style.display = 'flex';
                }
            },
            deleteThisPhoto: function(e) {
                let photoBox = document.getElementById('photoBox');
                let photoBoxChildren = photoBox.children;
                let nowItem = e.target.parentElement.parentElement;
                let index;
                for(let i = 0; i < photoBoxChildren.length; i++) {
                    if(photoBoxChildren[i] === nowItem) {
                        index = i;
                    }
                }
                imgs.splice(index, 1);
                frames.splice(index, 1);
                photoBox.removeChild(e.target.parentElement.parentElement);
            },
            flyToFrame: function(e) {
                let index = e.target.getAttribute('index');
                cameraPathAnimation.flyToFrame(parseInt(index));
            },
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){
            this.show();
        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){

        },
        destroyed(){

        }

    }
</script>

<style scoped>
    @import "./css/photo.css";
</style>
